<template>
  <!-- 歌单列表的过滤组件 -->
  <ul class="music-filter">
    <li class="filter-item">
      <div class="filter-title">
        <i class="el-icon-chat-dot-square"></i>语种
      </div>
      <ul class="item-list">
        <li
          class="list-item"
          :class="index === activeIdx[0] ? 'active' : ''"
          v-for="(language, index) in languages"
          :key="index"
          @click="changeActiveIdx(0, index)"
        >
          {{ language }}
        </li>
      </ul>
    </li>
    <li class="filter-item">
      <div class="filter-title"><i class="el-icon-headset"></i>流派</div>
      <ul class="item-list">
        <li
          class="list-item"
          :class="index === activeIdx[1] ? 'active' : ''"
          v-for="(genre, index) in genres"
          :key="index"
          @click="changeActiveIdx(1, index)"
        >
          {{ genre }}
        </li>
      </ul>
    </li>
    <li class="filter-item">
      <div class="filter-title"><i class="el-icon-collection"></i>主题</div>
      <ul class="item-list">
        <li
          class="list-item"
          :class="index === activeIdx[2] ? 'active' : ''"
          v-for="(theme, index) in themes"
          :key="index"
          @click="changeActiveIdx(2, index)"
        >
          {{ theme }}
        </li>
      </ul>
    </li>
    <li class="filter-item">
      <div class="filter-title"><i class="el-icon-present"></i>情感</div>
      <ul class="item-list">
        <li
          class="list-item"
          :class="index === activeIdx[3] ? 'active' : ''"
          v-for="(emotion, index) in emotions"
          :key="index"
          @click="changeActiveIdx(3, index)"
        >
          {{ emotion }}
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
import { m_filter } from "@/mixin";
export default {
  name: "CateFilter",
  mixins: [m_filter],
  data() {
    return {
      languages: ["华语", "欧美", "粤语", "日语", "韩语"],
      genres: ["流行", "摇滚", "民谣", "电子", "影视"],
      themes: ["经典", "翻唱", "KTV", "网络", "节日"],
      emotions: ["快乐", "美好", "安静", "思念", "孤独"],
    };
  },
};
</script>

<style lang="less" scoped>
.music-filter {
  display: flex;
  justify-content: space-around;
  padding-bottom: 0.3rem;
  .filter-item {
    width: 20%;
    .filter-title {
      font-size: 0.3rem;
      margin: 0.2rem 0;
      margin-bottom: 0.1rem;
    }
    .item-list {
      display: flex;
      justify-content: space-between;
      .list-item {
        margin-left: 0.2rem;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 0.5rem;
        width: 1rem;
        background: linear-gradient(to top, #2c5364, #203a43, #0f2027);
        transition: all 0.5s;
        font-size: 00.1rem;
        &:hover {
          color: #ffcff1;
          background: #2c5364;
        }
        &.active {
          color: #ffcff1;
          background: #2c5364;
        }
      }
    }
  }
}
@media screen and (max-width: 1110px) {
  .music-filter {
    flex-wrap: wrap;
    flex-direction: column;
    .filter-item {
      width: 70%;
      margin-top: 0.3rem;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>